<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="ISUX">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="stylesheet" type="text/css" href="../frozen/css/frozen.css">
    <link rel="stylesheet" type="text/css" href="../css/default.css">
    <title>火堆</title>
    <link rel="stylesheet" type="text/css" href="../css/project_detail_2.0.css">
</head>

<body>
    <footer class="ui-footer ui-footer-stable ui-border-t">
        <div class="ui-footer-links">
            <a href="#" class="link-home"></a>
            <a href="javascript:;" class="link-share"></a>
        </div>
        <div class="ui-footer-btns">
            <button class="btn-footer btn-red" onclick="showDBottom();">我要捐款</button>
            <button class="btn-footer btn-yellow">邀伙伴一起捐</button>
        </div>
    </footer>
    <div class="canvas-box">
        <canvas id="myCanvas" width="268" height="314"></canvas>
        <a href="#">长按保存图片</a>
    </div>

    <section class="ui-container">
        <div class="ui-scroll-wrapper" id="scroll-main">
            <div class="ui-scroll-scroller">
                <div class="ui-placehold ui-placehold-img">
                    <span style="background-image:url(../images/demo/demo-project-1.jpg)">
                        <div class="h3-box"><h3>3万留守儿童的渴望</h3></div>
                        <div class="status">募集中</div>
                    </span>
                </div>
                <div class="ui-module ui-border-tb">
                    <p class="ui-txt-tips">和“真爱公益”一起，为74所学校共29877名留守儿童筹集善款制作故事盒子。</p>
                    <div class="ui-progress-box">
                        <div class="ui-progress">
                            <span style="width:50%"></span>
                        </div>
                        <div class="ui-progress-val">20%</div>
                    </div>
                    <ul class="ui-row top-infos">
                        <li class="ui-col ui-col-24">
                            <p>截止<em>99</em>天</p>
                        </li>
                        <li class="ui-col ui-col-38">
                            <p>已筹<em>999999.99</em>元</p>
                        </li>
                        <li class="ui-col ui-col-38">
                            <p>还需<em>999999.99</em>元</p>
                        </li>
                    </ul>
                </div>
                <div class="ui-module-title ui-border-tb ui-spring-title">发起方</div>
                <ul class="ui-list ui-border-b fix-layout ui-arrowlink">
                    <li class="ui-border-t">
                        <a href="#">
                            <div class="ui-avatar ui-avatar-spring">
                                <span style="background-image:url(../images/demo/demo-avatar-1.jpg)"></span>
                            </div>
                            <div class="ui-list-info">
                                <h4 class="ui-nowrap">lisatong </h4>
                                <p class="ui-nowrap">小学数学老师</p>
                            </div>
                        </a>
                    </li>
                </ul>
                <div class="ui-module-title ui-border-t">清单明细</div>
                <div class="ui-module ui-border-tb">
                    <ul class="ui-row momeny-list">
                        <li class="ui-col ui-col-50 ui-border-b">
                            <p class="ui-nowrap">品名</p>
                        </li>
                        <li class="ui-col ui-col-30 ui-border-b">
                            <p class="ui-nowrap">单价（元）</p>
                        </li>
                        <li class="ui-col ui-col-20 ui-border-b">
                            <p class="ui-nowrap">数量</p>
                        </li>
                        <li class="ui-col ui-col-50 ui-border-b">
                            <p class="ui-nowrap">篮球篮球篮球</p>
                        </li>
                        <li class="ui-col ui-col-30 ui-border-b">
                            <p class="ui-nowrap">50.00</p>
                        </li>
                        <li class="ui-col ui-col-20 ui-border-b">
                            <p class="ui-nowrap">x10</p>
                        </li>
                        <li class="ui-col ui-col-50 ui-border-b">
                            <p class="ui-nowrap">足球</p>
                        </li>
                        <li class="ui-col ui-col-30 ui-border-b">
                            <p class="ui-nowrap">50.00</p>
                        </li>
                        <li class="ui-col ui-col-20 ui-border-b">
                            <p class="ui-nowrap">x10</p>
                        </li>
                        <li class="ui-col ui-col-100">
                            <p class="ui-nowrap total-price"><span>合计 : </span>1012.00<span>元</span></p>
                        </li>
                    </ul>
                    <div class="ui-module-bottom ui-border-t ui-arrowlink">
                        善款接收
                        <p>上海真爱梦想公益基金会</p>
                    </div>
                </div>

                <div class="ui-module-title ui-border-t">
                    爱心榜
                    <p>捐款人次&nbsp;<em>1233456</em>&nbsp;|&nbsp;&nbsp;一起捐&nbsp;<em>12345</em></p>
                </div>
                <div class="ui-module ui-border-tb">
                    <div class="ui-justify avatar-list">
                        <a href="##">
                            <ul class="ui-arrowlink">
                                <li>
                                    <div class="ui-avatar-tiled"><span style="background-image:url(../images/demo/demo-avatar-1.jpg)"></span></div>
                                </li>
                                <li>
                                    <div class="ui-avatar-tiled"><span style="background-image:url(../images/demo/demo-avatar-1.jpg)"></span></div>
                                </li>
                                <li>
                                    <div class="ui-avatar-tiled"><span style="background-image:url(../images/demo/demo-avatar-1.jpg)"></span></div>
                                </li>
                                <li>
                                    <div class="ui-avatar-tiled"><span style="background-image:url(../images/demo/demo-avatar-1.jpg)"></span></div>
                                </li>
                                <li>
                                    <div class="ui-avatar-tiled"><span style="background-image:url(../images/demo/demo-avatar-1.jpg)"></span></div>
                                </li>
                                <li>
                                    <div class="ui-avatar-tiled"><span style="background-image:url(../images/demo/demo-avatar-1.jpg)"></span></div>
                                </li>
                            </ul>
                        </a>
                    </div>

                    <div class="ui-module-bottom ui-border-t ui-arrowlink ui-fp-hint">
                        <span class="img-box"></span> 兴业全球基金会
                        <p>已配捐 <em>123456.00</em> 元</p>
                    </div>
                </div>

                <div class="drag-hint-bottom">继续拖动，查看图文详情</div>
                <!-- <div class="banner-wrap">
                    <div class="txt-bottom">
                        <a href="#">了解火堆</a>
                        <a href="#">关注火堆</a><img src="../images/ic-qrcode.png" alt="">
                    </div>
                    <img class="img-bottom" src="../images/logo_and_txt.png" alt="">
                </div> -->
            </div>
        </div>

        <!-- 这一块需求希望用ajax来分开加载 -->
        <div class="ui-border-t ui-tab">
            <ul class="ui-tab-nav ui-border-b">
                <li class="current">项目详情</li>
                <li>项目进度</li>
            </ul>
            <ul class="ui-tab-content" style="width:300%">
                <li class="current">
                    <div class="ui-scroll-wrapper" id="scroll-sub-1">
                        <div class="ui-scroll-scroller">
                            <div class="drag-hint-top">继续下拉，返回基本信息</div>
                            <div class="ui-module ui-border-b">
                                <p class="ui-txt-tips">和“真爱公益”一起，为74所学校共29877名留守儿童筹集善款制作故事盒子。</p>
                                <img class="img-detail" src="../images/demo/demo-p-detail.jpg" alt="">
                                <p class="ui-txt-tips">和“真爱公益”一起，为74所学校共29877名留守儿童筹集善款制作故事盒子。</p>
                                <img class="img-detail" src="../images/demo/demo-p-detail.jpg" alt="">和“真爱公益”一起，为74所学校共29877名留守儿童筹集善款制作故事盒子。</p>和“真爱公益”一起，为74所学校共29877名留守儿童筹集善款制作故事盒子。</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="ui-scroll-wrapper">
                    <div class="ui-scroll-wrapper" id="scroll-sub-2">
                        <div class="ui-scroll-scroller">
                            <div class="drag-hint-top">继续下拉，返回基本信息</div>
                            <div class="ui-module ui-border-b">
                                这里放项目进度 和“真爱公益”一起，为74所学校共29877名留守儿童筹集善款制作故事盒子。
                                </p>和“真爱公益”一起，为74所学校共29877名留守儿童筹集善款制作故事盒子。</p>和“真爱公益”一起，为74所学校共29877名留守儿童筹集善款制作故事盒子。</p>和“真爱公益”一起，为74所学校共29877名留守儿童筹集善款制作故事盒子。</p>
                                和“真爱公益”一起，为74所学校共29877名留守儿童筹集善款制作故事盒子。</p>和“真爱公益”一起，为74所学校共29877名留守儿童筹集善款制作故事盒子。</p>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </section>

    <div class="d-bottom">
        <div class="b-info">
            <b class="btn-close"></b>
            <div class="title ui-border-b">请输入捐款金额</div>
            <div class="ui-fp-hint">
                <span class="img-box"></span> 项目配捐额度
                <p><em>123456.00</em> 元(比例1:1，1元起配)</p>
            </div>
            <div class="detail-box ui-whitespace">
                <div class="ui-justify">
                    <ul class="p-tag-list">
                        <li class="p-tag active">20<i>元</i></li>
                        <li class="p-tag">50<i>元</i></li>
                        <li class="p-tag">80<i>元</i></li>
                        <li class="p-tag">100<i>元</i></li>
                    </ul>
                </div>
                <div class="input-box">
                    <input type="number" placeholder="自定义金额"></input><i>元</i></div>
                <button class="ui-btn-lg btn-red">立即捐款</button>
                <div class="detail-bottom">
                    <label class="ui-checkbox">
                        <input type="checkbox" checked="">
                    </label>
                    同意<a href="#" onclick="return showDeal();">《火堆用户协议》</a>
                </div>
            </div>
        </div>
    </div>
    <div class="dialog-step">
        <div class="dialog-box">
            <h4>《火堆用户协议》</h4>
            <div class="txt">
                1.标题
                <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
                2.标题
                <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
                3.标题
                <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
                4.标题
                <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
                5.标题
                <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
            </div>
            <div class="btn-red btn-close">我知道了</div>
        </div>
    </div>

    <script src="../frozen/lib/zeptojs/zepto.min.js"></script>
    <script src="../frozen/js/frozen.js"></script>
    <script src="../js/util_mobile.js"></script>
    <script>
        initMainScroll();

        // 初始化tab相关js
        localStorage.setItem('init-1', 'true');
        localStorage.setItem('init-2', 'false');
        $('.ui-tab').css('min-height', $(window).height() - ($('footer').height() || 0) - 45);
        $('.ui-tab')[0].addEventListener('touchstart', function(e) {
            e.preventDefault();
        });
        var tab = new fz.Scroll('.ui-tab', {
            role: 'tab',
            autoplay: false,
        });
        tab.on('beforeScrollStart', function(from, to) {
            var index = to + 1;
            if ((index == 1 && localStorage.getItem('init-' + index) == 'false') || (index == 2 && localStorage.getItem('init-' + index) == 'false')) {
                initOnePScroll(index);
                localStorage.setItem('init-' + index, 'true');
            }
        });
        initOnePScroll(1);


        $('.d-bottom .b-info .p-tag-list .p-tag').click(function() {
            $(this).addClass('active').siblings('.p-tag').removeClass('active');
            $('.d-bottom .b-info .detail-box .input-box').removeClass('active');
        });

        $('.d-bottom .b-info .detail-box .input-box input').click(function() {
            $('.d-bottom .b-info .p-tag-list .p-tag').removeClass('active');
            $(this).parent().addClass('active');
        });

        $('.d-bottom .b-info .btn-close').click(function() {
            $(this).parents('.d-bottom').hide();
        });

        $('.dialog-step .dialog-box .btn-close').click(function() {
            $('.dialog-step').removeClass('show');
        });

        $('.d-bottom .b-info .detail-box button').tap(function() {
            myAlert('提示', 'hhhhhhhhhhhhh');
        })

        function showDBottom() {
            var d = $('.d-bottom');
            var b = d.find('.b-info');
            // b.css('bottom', b.height());
            // d.css('opacity', '0').show();

            d.show();
        }

        function showDeal() {
            $('.dialog-step').addClass('show');
            return false;
        }

        function initMainScroll() {
            if ($('#scroll-main')) {
                // 正文滚动的js
                $('#scroll-main').css('height', $(window).height() - $('footer').height() || 0 - $('header').height() || 0);
                new fz.Scroll('#scroll-main', {
                    scrollY: true
                });
                // 判断拖动到下一页的js
                var yOffset
                $('#scroll-main')[0].addEventListener('touchstart', function(e) {
                    yOffset = 0;
                });
                $('#scroll-main')[0].addEventListener('touchmove', function(e) {
                    e.preventDefault();
                    var reg = /[0-9]+/g;
                    yOffset = $(this).find('.ui-scroll-scroller').css('transform').match(reg)[1]
                });
                $('#scroll-main')[0].addEventListener('touchend', function(e) {
                    var max = Math.max($(this).find('.ui-scroll-scroller').height() - $(this).height(), 0);
                    if (yOffset >= max + 30) {
                        console.log('  load', yOffset);
                        scrollToTop($('.ui-tab').offset().top);
                    } else {}
                });
            }
        }

        // 初始化tab内的指定的li的scroll
        function initOnePScroll(index) {
            var height = $(window).height() - ($('footer').height() || 0) - 45;
            $('.ui-tab-content > li:nth-child(' + index + ') .ui-scroll-wrapper').css('height', height);
            $('.ui-tab-content > li:nth-child(' + index + ') .ui-scroll-wrapper .ui-scroll-scroller').css('min-height', height + 1)

            new fz.Scroll('#scroll-sub-' + index, {
                scrollY: true
            });

            var yOffset2;
            $('.ui-tab-content > li:nth-child(' + index + ') .ui-scroll-wrapper')[0].addEventListener('touchstart', function(e) {
                yOffset2 = 0;
            });
            $('.ui-tab-content > li:nth-child(' + index + ') .ui-scroll-wrapper')[0].addEventListener('touchmove', function(e) {
                e.preventDefault();
                var reg = /-*[0-9]+/g;
                yOffset2 = $(this).find('.ui-scroll-scroller').css('transform').match(reg)[1]
            });
            $('.ui-tab-content > li:nth-child(' + index + ') .ui-scroll-wrapper')[0].addEventListener('touchend', function(e) {
                if (yOffset2 > 35) {
                    console.log('  load', yOffset2);
                    scrollToTop(0);
                } else {}
            });
        }

        /**
         * fun： 滚动页面到某个指定位置
         * parm：target     目标位置
         * parm：direction  滚动方向（true：向下滚，false：向上滚）
         * parm：frame      动画每秒的帧数
         * parm：duration   动画持续时间（秒）
         */
        function scrollToTop(target) {
            target = Math.min(target, $('.ui-container').height() - $(window).height());
            target = Math.max(target, 0)

            var direction = target - $(window).scrollTop() > 0 ? true : false;
            var frame = 100;
            var duration = .2;

            var gap = Math.ceil(Math.abs(target - $(window).scrollTop()) / (duration * frame));
            if (!direction) {
                gap = 0 - gap;
            }

            console.log(target, gap);
            var scrollAni = function(t, g) {
                var now = $(window).scrollTop();
                $(window).scrollTop(now + g);
                console.log(direction, now, t, g, now - t, now + g);
                if ((direction && now >= t) || (!direction && now <= t)) {
                    $(window).scrollTop(t);
                    return;
                }
                setTimeout(function() {
                    scrollAni(target, g);
                }, 1000 / frame);
            }
            scrollAni(target, gap);
        }
        // canvas
        function loadImages(sources, callback) {
            var images = {};
            var loadedImages = 0;
            var numImages = 0;
            // get num of sources
            for (var src in sources) {
                numImages++;
            }
            for (var src in sources) {
                images[src] = new Image();
                images[src].onload = function() {
                    if (++loadedImages >= numImages) {
                        callback(images);
                    }
                };
                images[src].src = sources[src];
            }
        }

        window.onload = function(images) {
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");
            ctx.fillStyle = '#fff';
            ctx.fillRect(0, 157, 268, 157);



            var sources = {
                banner: "../images/love.png",
                qrCode: "../images/qrcode2.png",
            };

            loadImages(sources, function(images) {
                    ctx.drawImage(images.banner, 0, 0, 314, 157);
                    ctx.drawImage(images.qrCode, 83, 166, 103, 103);
                    ctx.font = "15px Georgia";
                    ctx.fillStyle = "#a89e99";
                    ctx.fillText("扫一扫，献爱心", 83, 292);

                    return canvas;
                }
              );

                function convertCanvasToImage(canvas) {
                    var image = new Image();
                    image.src = canvas.toDataURL("image/png");
                    return image;
                }

        };



        $('.link-share').click(function() {
            $('.canvas-box').css('display', 'block');
        });
        $('.canvas-box').click(function() {
            $('.canvas-box').css('display', 'none');
        });
    </script>
</body>

</html>
